import { useState ,useRef} from 'react';
import './App.scss';
import Addtab from './components/Addtab';
import Checkbox from './components/Checkbox';
import ComboBox from './components/ComboBox';
import Grade from './components/Grade';
import Radio from './components/Radio';

function App() {
  //添加tab的model 显示状态 默认 未显示
  const [addtab, setaddtab] = useState(false)
  //tab标签页数据
  const [data, setdata] = useState(['单选', '多选', '下拉框', '等级评价'])
  //单选框数据
  const [redio, setredio] = useState(['M', "L", "XL", "XXL", 'XXXL', 'XXXXL'])
  // 单选框默认选中数据index  
  const [checkedIndex, setcheckedIndex] = useState(0)
  //多选框数据 
  const [checkbox, setcheckbox] = useState(['打篮球', '踢足球', '打游戏', '写作业', '睡觉', '上课'])
  //下拉框的数据
  const [combobox, setcombobox] = useState(['M', "L", "XL", "XXL", 'XXXL', 'XXXXL'])
  //添加的tab名称
  // const [addtabname,settabname] =  useState('')

  //定义添加tab input框的ref
  const addtabinp = useRef(null)
  //tab显示页的id（因为数据假数据所以用的 名称）
  const [ShowPageIndex, setIndex] = useState('单选')
  //等级评价选中的等级
  const [dg, setdg] = useState(0)
  //删除tab
  const deltab = (item) => {
    let new_data = data.filter((e) => {
      return e != item
    })
    console.log(new_data, 'del');
    setdata(new_data)
  }
  //给等级赋值
  const Dgpj = (item) => {
    setdg(item)
  }
 
  //多选返回的数据
  const CheckboxChecked = (i) => {
    console.log(i);
  }
  //下拉框选中返回的数据
  const ComboxBox = (index, item) => {
    console.log('选中的下标 和数据：', index, item);
  }
  //模态框失败返回的操作
  const NoFinish = (e) => {
    console.log('关闭模态框', 1231);
    setaddtab(e)
  }
  //model框 成功返回的操作
  const OnOk = (e) => {
    console.log('传输成功');
    console.log(addtabinp.current.value);
    // data.push(addtabname)
    data.push(addtabinp.current.value)
    console.log(data);
    setdata(data)
    setaddtab(e)

  }
  //受控组件 的 
  // const changetabname=(e)=>{
  //   console.log(e.target.value); //两种都是获取input值的方法
  //   settabname(e.nativeEvent.data)
  // }
  return (
    <div className="App">
      <header>
        {
          data.map((item, index) => {
            return (
              <span key={index} onClick={() => setIndex(item)}>{item}<label onClick={() => deltab(item)}>×</label></span>
            )
          })
        }
        <span onClick={()=>{setaddtab(!addtab)}} style={{ marginRight: 30 }}>+</span>
      </header>
      <h1>{ShowPageIndex}</h1>

      <div style={{ display: (ShowPageIndex === '单选' ? 'block' : 'none') }}>
        <Radio data={redio} setcheckedIndex={(index)=>{setcheckedIndex(index)}} checkedIndex={checkedIndex}></Radio>
      </div>

      <div style={{ display: (ShowPageIndex === '多选' ? 'block' : 'none') }}>
        <Checkbox data={checkbox} CheckedItem={CheckboxChecked}></Checkbox>
      </div>

      <div style={{ display: (ShowPageIndex === '下拉框' ? 'block' : 'none') }}>
        <ComboBox data={combobox} Checked={ComboxBox} text='默认选项'></ComboBox>
      </div>
      <div style={{ display: (ShowPageIndex === '等级评价' ? 'block' : 'none') }}>
        <h3>等级评价：{dg}</h3>
        <Grade dgpj={Dgpj} dg={dg} ></Grade>
      </div>
      <div >
        <Addtab  Close={NoFinish} OnOk={OnOk} title='addtab' isShow={addtab} height = {'300px'}>
          <input type="text" placeholder='请输入tab名称' ref={addtabinp} 
          // value={addtabname} onChange={(e)=>{changetabname(e)}} 
          />
        </Addtab>
      </div>



    </div>
  );
}

export default App;
